<style include="common cros-button-style">
  #container {
    display: grid;
    grid-template-areas:
      '. . userpreview        . .'
      '. . time-of-day-banner . .'
      '. . middle             . .'
      '. . rbg-keyboard       . .'
      '. . .                  . .';
    grid-template-columns: 1fr 24px minmax(480px, 960px) 24px 1fr;
    grid-template-rows: 108px auto 1fr auto 32px;
    height: 100%;
    position: relative;
    width: 100%;
  }

  user-preview {
    grid-area: userpreview;
  }

  time-of-day-banner {
    grid-area: time-of-day-banner;
    margin-bottom: 23px;
    min-height: 72px;
  }

  #middle {
    display: grid;
    gap: 16px;
    grid-area: middle;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }

  keyboard-backlight {
    grid-area: rbg-keyboard;
    margin-top: 16px;
  }

  :host-context(body.jelly-enabled) #container {
    grid-template-columns: 1fr 24px minmax(500px, 1020px) 24px 1fr;
    grid-template-rows: 132px 1fr auto 24px;
  }

  :host-context(body.jelly-enabled) #middle {
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(318px, 1fr));
  }

  :host-context(body.jelly-enabled) keyboard-backlight {
    margin-top: 20px;
  }

  @media (max-width: 700px) {
    :host-context(body.jelly-enabled) #container {
      grid-template-columns: 1fr 24px 500px 24px 1fr;
    }
    :host-context(body.jelly-enabled) #middle {
      grid-template-columns: repeat(1, 500px);
    }
  }

</style>
<div id="container">
  <user-preview path="[[path]]">
  </user-preview>
  <template is="dom-if" if="[[shouldShowTimeOfDayBanner_]]">
    <time-of-day-banner></time-of-day-banner>
  </template>
  <div id="middle">
    <wallpaper-preview>
      <personalization-theme></personalization-theme>
    </wallpaper-preview>
    <template is="dom-if" if="[[shouldShowAmbientPreview_]]">
      <ambient-preview-large>
      </ambient-preview-large>
    </template>
  </div>
  <template is="dom-if" if="[[isRgbKeyboardSupported_]]">
    <keyboard-backlight></keyboard-backlight>
  </template>
</div>
